<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
	<title>html5 svg左侧滑出手机聊天框代码 - 站长素材</title>
	<link rel="stylesheet" type="text/css" href="/stylesheets/normalize.css" />
	<link rel="stylesheet" type="text/css" href="/stylesheets/default.css">
	<link rel='stylesheet prefetch' href='http://fonts.useso.com/css?family=Open+Sans'>
	<link rel="stylesheet" type="text/css" href="/stylesheets/styles.css">
	<link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<!--[if IE]>
	<script src="http://libs.useso.com//javascripts/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>

<div class="demo">
	<svg class="sidebar" viewBox="0 0 300 500">
		<path class="s-path" fill="#fff" d="M0,0 50,0 a0,250 0 1,1 0,500 L0,500" />
	</svg>
	<div class="static">
		<div class="static__text">Pull white sidebar to the right</div>
	</div>
	<div class="sidebar-content">
		<div class="contact">
			<span ><i class="fa fa-angle-double-down fa-lg" style="color:#6D7ADA">&nbsp;<span class="cuisine__title">肉类</span></i></span>
		</div>

		<% ra.forEach(function(weixinshow, index) { %>
		<div class="contact">
			<span class="contact__name"><i class="fa fa-plus fa-lg" style="color:#6D7ADA">&nbsp;<%= weixinshow.name %></i></span>
		</div>
		<% }) %>
		<div class="contact">
			<span ><i class="fa fa-angle-double-down fa-lg" style="color:#6D7ADA">&nbsp;<span class="cuisine__title">菜类</span></i></span>
		</div>
		<% ca.forEach(function(weixinshow, index) { %>
		<div class="contact">
			<span class="contact__name"><i class="fa fa-plus fa-lg" style="color:#6D7ADA">&nbsp;<%= weixinshow.name %></i></span>
		</div>
		<% }) %>


	</div>
	<div class="chat">
		<span class="chat__back"></span>
		<span class="chat__status">status</span>
		<div class="chat__person">
			<span class="chat__online active"></span>
			<span class="chat__name">Huehue Huehue</span>
		</div>
		<div class="chat__messages">
			<div class="chat__msgRow">
				<div class="chat__message mine">Such SVG, much Javascript, very CSS!</div>
			</div>
			<div class="chat__msgRow">
				<div class="chat__message notMine">Wow!</div>
			</div>
			<div class="chat__msgRow">
				<div class="chat__message notMine">Very elastic! Such easings!</div>
			</div>
			<div class="chat__msgRow">
				<div class="chat__message mine">

				</div>
			</div>
		</div>
		<input type="text" class="chat__input" placeholder="Your message" />
	</div>
</div>


<script type="text/javascript" src='/javascripts/stopExecutionOnTimeout.js?t=1'></script>
<script type="text/javascript" src='/javascripts/jquery.js'></script>
<script type="text/javascript" src="/javascripts/main.js"></script>


</body>
</html>